<template>
  <div class="silo">
    <!-- banner -->
    <div class="banners">
      <div class="banner" v-if="banners">
        <h2>{{banners.main_title}}</h2>
        <h3>{{banners.sub_title}}</h3>
        <h4>{{banners.description}}</h4>
        <img :src="banners.main_image" alt />
      </div>
      <img v-else src="https://img.alicdn.com/tfs/TB1WQ91o4z1gK0jSZSgXXavwpXa-750-900.jpg" alt />
    </div>
    <!-- imgs -->
    <div class="imgs">

    </div>
    <!-- dataList -->
    <div class="main">
      <ul>
        <router-link
         v-for="data in dataList"
            :key="data.enentId"
            :to="{name:'ProductList',query:{id:data.categoryId}}"
            tag="li"
        >
        <img :src="data.imageUrl" alt="">
        <div class="imgMain">
          <span v-if="data.siloCategory==='海外'">海外直销</span>
        <h3>{{data.englishName}}</h3>
        <h4>{{data.chineseName}}</h4>
        <h5>{{data.discountText}}</h5>
        </div>
        </router-link>
      </ul>
    </div>
    <!-- foot -->
     <div class="foot">
        <h2>400 - 664 - 6698</h2>
        <ul>
          <li @click="handleClick('/index')">首页</li>
          <li>|</li>
          <li>
            <a
              href="https://apps.apple.com/cn/app/id510289916?spm=a2o1p.9077418.0.0.4bf24cabGjYijW"
            >客户端</a>
          </li>
          <li>|</li>
          <li @click="handleClick('/login')">登录</li>
          <li>|</li>
          <li @click="handleClick('/reg')">注册</li>
        </ul>
        <h2>浙ICP备16004860号-1</h2>
      </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
import axios from "axios";

export default {
  methods: {
    ...mapMutations("tabbar",["show","hide","homeTrue","homeFalse","upcomingTrue","upcomingFalse"]),
      handleClick(path) {
         if(path==='/index'){
        if(this.home === true){

        }else{
           this.homeTrue()
        this.upcomingFalse()
        }
      }
      this.$router.push(path);
}
  },
  computed: {
    ...mapState("silo", ["banners", "dataList"]),
    computedBanners() {}
  },
  mounted() {
    this.show();
  },
  beforeDestroy() {
    this.hide();
  }
};
</script>

<style lang="scss" scoped>
.silo {
  //banner
  .banners {
    width: 3.75rem;
    height: 4.5rem;
    color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
    .banner {
      position: relative;
      text-align: center;
      h2 {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 1.1rem;
        font-size: 0.26rem;
        font-weight: 700;
      }
      h3 {
        font-size: 0.14rem;
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0.85rem;
      }
      h4 {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0.65rem;
      }
    }
  }
  //main
  .main{
    ul{
         padding: 0 0.15rem;
      li{
      margin-top: 0.15rem;
         width: 3.45rem;
        height: 2.07rem;
        margin-bottom: 0.1rem;
        position: relative;
        img{
           width: 100%;
          height: 100%;
        }
       .imgMain{
          color: #fff;
          position: absolute;
          left: 0.1rem;
          bottom: 0.1rem;
          font-size: .14rem;
          span{
            font-size: .12rem;
            color: #000;
            background: #fff;
        }
        h3{

        }
        h4{

        }
        h5{

        }
       }
      }
    }
  }
  //foot
  //foot
  .foot {
    padding: 0 0.15rem 0.3rem;
    font-size: 0.12rem;
    h2 {
      text-align: center;
      font-size: 0.13rem;
      margin: 0.2rem 0 0.18rem;
    }
    ul {
      display: flex;
      justify-content: space-between;
      padding: 0 0.7rem;
    }
  }
}
</style>
